<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>business_add</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <style>
        .view-form .layui-input-block, .view-form .layui-input-inline {
            line-height: 36px;
            background: #eeeeee;
            padding-left: 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div style="padding: 20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
           <!-- <label class="layui-form-label">产权所属：</label>
            <div class="layui-input-inline">
                <input type="radio" name="PROPERTY_RIGHT_TYPE" value="0" title="自有" checked autocomplete="off"
                       class="layui-input">
                <input type="radio" name="PROPERTY_RIGHT_TYPE" value="1" title="非自有" autocomplete="off"
                       class="layui-input">
            </div>-->
                <label class="layui-form-label">项目类型:</label>
                <div class="layui-input-inline">
                    <select name="ROOM_TYPE" id="ROOM_TYPE" lay-verify="required" lay-search="" lay-filter="www"></select>
                </div>
            <!--<label class="layui-form-label" style="width: 80px;">项目类型：</label>
            <div class="layui-input-inline">
                <input type="text" name="ROOM_TYPE_NAME" placeholder="请输入产权人" autocomplete="off"
                       class="layui-input">
            </div>-->
        </div>
        <div class="layui-form-item">
           <!-- <label class="layui-form-label">项目名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="ROOM_NAME" lay-verify="required" placeholder="请输入项目名称" autocomplete="off"
                       class="layui-input">
            </div>-->
            <label class="layui-form-label">项目号：</label>
            <div class="layui-input-inline">
                <input type="text" name="ROOM_NUM" lay-verify="required" placeholder="请输入项目号" autocomplete="off"
                       class="layui-input room-num">
            </div>
            <label class="layui-form-label" style="width: 150px;">项目面积(m²)：</label>
            <div class="layui-input-inline">
                <input type="number" name="ROOM_AREA" lay-verify="required" placeholder="请输入项目面积" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产权所属：</label>
            <div class="layui-input-inline">
                <input type="radio" name="PROPERTY_RIGHT_TYPE" value="0" title="自有" checked autocomplete="off"
                       class="layui-input">
                <input type="radio" name="PROPERTY_RIGHT_TYPE" value="1" title="非自有" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 150px;">产权人：</label>
            <div class="layui-input-inline">
                <input type="text" name="PROPERTY_RIGHT_PERSON" placeholder="请输入产权人" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">项目图片：</label>
            <div class="layui-input-block layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多图片</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>缩略图</th>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用：</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest"
                       lay-text="启用|关闭">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息：</label>
            <div class="layui-input-block">
                <textarea name="ROOM_INFO" placeholder="请输入备注信息" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item operate-button-group">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="room">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../../static/js/common/queryUtils.js"></script>
<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script>
    var uploadfiles = new Array(); // 要上传的文件列表路径
    layui.use(['jquery', 'form', 'layer', 'upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        //多文件列表示例
        var files;
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/servlet/UploadHandleServlet'
            // ,accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"></td>'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                        return false;
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.errcode == 0) { //上传成功
                    var obj = {};
                    obj.name = res.data.fileName;
                    obj.size = res.data.fileSize;
                    obj.ext = res.data.extName;
                    obj.url = res.data.fileUrl;
                    uploadfiles.push(obj);
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(4).html(''); //清空操作
                    delete files[index]; //删除文件队列已经上传成功的文件
                    return;
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

        //操作类型：add新增，edit修改，view查看
        var operateType = QueryUtils.GetQueryString("type");
        var id = QueryUtils.GetQueryString("id");
        var buildingId = QueryUtils.GetQueryString("buildingId");
        var businessId = QueryUtils.GetQueryString("businessId");
        var unitList;
        var floorList;
        var ROOM_TYPES ;


        switch (operateType) {
            case "add":
                break;
            case "edit":
                $.ajax({
                    url: "/room/info",
                    data: {ROOM_ID: id},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            ROOM_TYPES =  res.data.ROOM_TYPE;
                            // 初始化附件
                            var attachments = res.attachmentData;
                            if (!!attachments) {
                                var host = location.host;
                                for (var i = 0; i < attachments.length; i++) {
                                    var attachment = attachments[i];
                                    var demoListView = $('#demoList');
                                    var tr = $(['<tr id="upload-' + (i + 1) + '">'
                                        , '<td><img src="http://' + host + '/' + attachment.PATH + '" alt="' + attachment.NAME + '" class="layui-upload-img"></td>'
                                        , '<td>' + attachment.NAME + '</td>'
                                        , '<td>' + (attachment.SIZE / 1014).toFixed(1) + 'kb</td>'
                                        , '<td><span style="color: #5FB878;">上传成功</span></td>'
                                        , '<td>'
                                        , '<a onclick=\'operate.deleteImg(this, "' + attachment.ID + '");\' class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</a>'
                                        , '</td>'
                                        , '</tr>'].join(''));
                                    demoListView.append(tr);

                                    var obj = {};
                                    obj.id = attachment.ID;
                                    obj.name = attachment.NAME;
                                    obj.size = attachment.SIZE;
                                    obj.ext = attachment.EXT;
                                    obj.url = attachment.PATH;
                                    uploadfiles.push(obj);
                                }
                            }

                            //initFloor(res.data.UNIT_ID);
                            /*$("input[name='ROOM_NAME']").val(res.data.ROOM_NAME);*/
                            if (res.data.PROPERTY_RIGHT_TYPE == 0) {
                            } else if (res.data.PROPERTY_RIGHT_TYPE == 1) {
                                $("input:radio[name='PROPERTY_RIGHT_TYPE'][value='0']").attr('checked', 'false');
                                $("input:radio[name='PROPERTY_RIGHT_TYPE'][value='1']").attr('checked', 'true');
                            }
                            $("input[name='PROPERTY_RIGHT_PERSON']").val(res.data.PROPERTY_RIGHT_PERSON);
                            $("input[name='ROOM_NUM']").val(res.data.ROOM_NUM);
                            $("input[name='ROOM_AREA']").val(res.data.ROOM_AREA);
                            if (res.data.IS_OPEN === "on") {
                                $("input[name='IS_OPEN']").parent().html('<input type="checkbox" checked="" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest" lay-text="启用|关闭">');
                            } else if (res.data.IS_OPEN === "off") {
                                $("input[name='IS_OPEN']").parent().html('<input type="checkbox" name="IS_OPEN" lay-skin="switch" lay-filter="switchTest" lay-text="启用|关闭">');
                            }
                            $("textarea[name='ROOM_INFO']").val(res.data.ROOM_INFO);

                            form.render();
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
                //显示房间类型
                $.ajax({
                    url: "/room/list_type",
                    data: {},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            for (var i = 0; i < res.data.length; i++) {
                                if (res.data[i].ID === ROOM_TYPES) {
                                    roomType = res.data[i].ID;
                                    var str = '<option value="' + res.data[i].ID + '" SELECTED>' + res.data[i].NAME + '</option>';
                                    $("select[name='ROOM_TYPE']").append(str);
                                } else {
                                    var str1 = '<option value="' + res.data[i].ID + '">' + res.data[i].NAME + '</option>';
                                    $("select[name='ROOM_TYPE']").append(str1);
                                }
                            }
                            form.render("select");
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });

                break;
            case "view":
                $.ajax({
                    url: "/room/info",
                    data: {ROOM_ID: id},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            ROOM_TYPES = "";
                            ROOM_TYPES =  res.data.ROOM_TYPE;
                            $("#testList").remove();
                            $("#testListAction").remove();
                            // 初始化附件
                            var attachments = res.attachmentData;
                            if (!!attachments) {
                                var host = location.host;
                                for (var i = 0; i < attachments.length; i++) {
                                    var attachment = attachments[i];
                                    var demoListView = $('#demoList');
                                    var tr = $(['<tr id="upload-' + (i + 1) + '">'
                                        , '<td><img src="http://' + host + '/' + attachment.PATH + '" alt="' + attachment.NAME + '" class="layui-upload-img"></td>'
                                        , '<td>' + attachment.NAME + '</td>'
                                        , '<td>' + (attachment.SIZE / 1014).toFixed(1) + 'kb</td>'
                                        , '<td><span style="color: #5FB878;"></span></td>'
                                        , '<td>'
                                        , '</td>'
                                        , '</tr>'].join(''));
                                    demoListView.append(tr);

                                    var obj = {};
                                    obj.name = attachment.NAME;
                                    obj.size = attachment.SIZE;
                                    obj.ext = attachment.EXT;
                                    obj.url = attachment.PATH;
                                    uploadfiles.push(obj);
                                }
                            }

                            $(".layui-form").addClass("view-form");
                            if (res.data.PROPERTY_RIGHT_TYPE == 0) {
                                $("input[name='PROPERTY_RIGHT_TYPE']").parent().html("自有");
                            } else if (res.data.PROPERTY_RIGHT_TYPE == 1) {
                                $("input[name='PROPERTY_RIGHT_TYPE']").parent().html("非自有");
                            }
                            if (!res.data.PROPERTY_RIGHT_PERSON) {
                                res.data.PROPERTY_RIGHT_PERSON = "&nbsp;";
                            }
                            $("input[name='PROPERTY_RIGHT_PERSON']").parent().html(res.data.PROPERTY_RIGHT_PERSON);
                            /*$("input[name='ROOM_NAME']").parent().html(res.data.ROOM_NAME);*/
                            $("input[name='ROOM_NUM']").parent().html(res.data.ROOM_NUM);
                            $("input[name='ROOM_AREA']").parent().html(res.data.ROOM_AREA);
                            if (res.data.IS_OPEN === "on"){
                                $("input[name='IS_OPEN']").parent().html("开启");
                            } else if (res.data.IS_OPEN === "off"){
                                $("input[name='IS_OPEN']").parent().html("关闭");
                            }
                            $("textarea[name='ROOM_INFO']").parent().html(res.data.ROOM_INFO);
                            $(".operate-button-group").remove();
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
                //显示房间类型
                $.ajax({
                    url: "/room/list_type",
                    data: {},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            for (var i = 0; i < res.data.length; i++) {
                                if (res.data[i].ID === ROOM_TYPES) {
                                    roomType = res.data[i].ID;
                                    var str = '<option value="' + res.data[i].ID + '" SELECTED >' + res.data[i].NAME + '</option>';
                                    $("select[name='ROOM_TYPE']").append(str);
                                } else {
                                    var str = '<option value="' + res.data[i].ID + '">' + res.data[i].NAME + '</option>';
                                    $("select[name='ROOM_TYPE']").append(str);
                                }
                            }
                            $("select[name='ROOM_TYPE']").attr("disabled","disabled");
                            form.render("select");

                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
                break;
        }

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if (this.checked === true) {
                layer.tips('温馨提示：保存成功后项目立即启用' + '', data.othis);
            } else if (this.checked === false) {
                layer.tips('温馨提示：保存成功后项目需开启后可用' + '', data.othis);
            }
        });

        //监听单元select
        form.on('select(unitSelect)', function (data) {
            initFloor(data.value);
        });
        //监听提交
        form.on('submit(room)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            if (!data.field.IS_OPEN) {
                data.field.IS_OPEN = "off"; //如果是否开启为未开启则设置为off
            }
            if (operateType === "add") {
                data.field.BUILDING_ID = buildingId;
                data.field.BUSINESS_ID = businessId;

                var roomNum = parseInt(data.field.ROOM_NUM);
                data.field.ROOM_NUM = roomNum;

                layer.msg('确认保存项目吗', {
                    time: 0
                    , btn: ['确定', '取消']
                    , shade: 0.3
                    , yes: function (index) {
                        layer.close(index); // 关闭当前提示框
                        $.ajax({
                            url: "/room/saveProject",
                            data: data.field,
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {
                                if (res.errcode === "0"){
                                    var i = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(i);  // 关闭新建房间页面
                                    parent.reload();    // 父页面表格刷新
                                    parent.layer.msg("保存成功", {offset: '150px'});   // 父页面弹出保存成功
                                } else if (res.errcode === "1"){
                                    layer.msg(res.errmsg, function(){});
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            } else if (operateType === "edit") {
                data.field.ROOM_ID = id;
                var sdata = {};
                sdata.ITEM = data.field;
                sdata.ATTACHMENT = uploadfiles;
                var sendData = {};
                sendData.DATA = JSON.stringify(sdata);
                layer.msg('确认编辑项目吗', {
                    time: 0
                    , btn: ['确定', '取消']
                    , shade: 0.3
                    , yes: function (index) {
                        layer.close(index); // 关闭当前提示框
                        $.ajax({
                            url: "/room/editItem",
                            data: sendData,
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {
                                if (res.errcode === "0") {
                                    var i = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(i);  // 关闭修改房间页面
                                    parent.reload();    // 父页面表格刷新
                                    parent.layer.msg("修改成功", {offset: '150px'});   // 父页面弹出修改成功
                                } else if (res.errcode === "1") {
                                    layer.msg(res.errmsg, function () {
                                    });
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            }
            return false;
        });
    });
</script>
</body>
</html>